<template>
  <v-chart :options="options" style="width:700px;height:400px;" />
</template>

<script>
import 'echarts/lib/chart/line'
// import echarts from 'echarts/lib/echarts'
export default {
  components: { },
  props: {
    xData: {
      type: Array,
      default: () => ([])
    },
    data: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      options: {
        title: {
          text: '综合指数'
        },

        tooltip: {
          trigger: 'axis'
        },

        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#5f75ac'
            }
          },
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#5f75ac'
            }
          }
        },
        series: [
          {
            name: '环境卫生',
            smooth: true,
            type: 'line',
            data: [66, 86, 84, 70, 52, 60, 61, 89, 56]
          }
        ]
      }
    }
  },
  created() {
    console.log(this.xData)
    console.log(this.data)
    this.createOptions(this.xData, this.data)
  },
  methods: {
    createOptions(xData, data) {
      this.options = {
        grid: {
          top: '10%',
          left: '1%',
          right: '1%',
          bottom: '12%'
        },
        xAxis: {
          name: '月份',
          nameTextStyle: { fontSize: 20 },
          splitNumber: xData.length,
          axisLine: { // 坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: 'purple'
            }
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            textStyle: {
              color: 'black'
            }
          },
          data: xData
        },
        yAxis: [{
          type: 'value',
          min: 0,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'purple'
            }
          },
          axisLine: {
            show: true
          },
          axisLabel: {
            show: true,
            margin: 20,
            textStyle: {
              color: '#d1e6eb'

            }
          },
          axisTick: {
            show: true
          }
        }],
        series: [{
          name: '注册总量',
          type: 'line',
          smooth: true, // 是否平滑曲线显示
          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 8,

          lineStyle: {
            normal: {
              color: '#fd4950' // 线条颜色
            },
            borderColor: '#f0f'
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#fff'
            }
          },
          itemStyle: { // 折线点样式
            normal: {
              color: '#fd4950'
            }
          },
          tooltip: {
            show: false
          },
          // areaStyle: { // 区域填充样式
          //   normal: {
          //     // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //       offset: 0,
          //       color: 'rgba(253,73,80,1)'
          //     },
          //     {
          //       offset: 1,
          //       color: 'rgba(253,73,80,0)'
          //     }
          //     ], false),
          //     shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
          //     shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          //   }
          // },
          data
        }]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import './index.scss';
  .tendency-content {
    height: 243px;
    /* overflow-y: hidden; */
  }

  .chart-wrap {
    height: 270px;
    width: 100%;
    overflow-x: auto;
    margin-bottom: 10px;
  }

  .chart-wrap::-webkit-scrollbar {
      width: 8px;
      height: 8px;
  }
  .chart-wrap::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #535353;
  }
  .chart-wrap::-webkit-scrollbar-track {
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #071B3D;
  }
</style>
